<template>
  <div>
    <div class="smember">
      <div class="smember__tip">
        会员卡储值功能帮助商家快速回笼资金，充实资金链。
      </div>
      <div class="smember__switch">
        <el-switch
          @change="handelSwitch"
          v-model="mSwitch"
          :active-value="1"
          :inactive-value="0"
        ></el-switch>
      </div>
    </div>
    <el-form ref="formRef" :model="formData" label-width="100px">
      <el-form-item label="是否有优惠" required>
        <el-radio-group v-model="formData.state">
          <el-radio :label="1">有优惠</el-radio>
          <el-radio :label="0">无优惠</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="formData.state === 1" label="储值规则" required>
        <div
          style="margin-bottom: 12px"
          v-for="(item, index) in formData.ruleList"
          :key="index"
        >
          充&nbsp;
          <el-input-number
            :min="0"
            :controls="false"
            style="width: 120px"
            v-model="item.payAmount"
          ></el-input-number
          >&nbsp;元, 送&nbsp;
          <el-input-number
            :min="0"
            :controls="false"
            style="width: 120px"
            v-model="item.discountAmount"
          ></el-input-number
          >&nbsp;元 &nbsp;&nbsp;
          <el-button
            v-if="index + 1 < formData.ruleList.length"
            @click="onRemove(index)"
            type="text"
            >删除</el-button
          >
          <el-button v-else @click="onAddRule" type="text">添加</el-button>
        </div>
      </el-form-item>
    </el-form>
    <br />
    <br />
    <br />
    <el-button @click="onSave" type="primary">保存</el-button>
  </div>
</template>

<script lang="ts">
/* eslint-disable indent */
import { Vue, Component } from "vue-property-decorator";
// import cloneDeep from "lodash/cloneDeep";
import {
  saveMemberPayRule,
  getMemberPayRule,
  getMemberCardInfoSwitch,
  setMemberCardInfoStatus,
} from "@/api/customer/member";

@Component({
  components: {},
})
export default class MemberStore extends Vue {
  // 储值功能开关
  mSwitch = 1;

  // 储值表单字段
  formData: any = {
    state: 0,
    ruleList: [{ state: 1, payAmount: null, discountAmount: null }],
  };

  created() {
    this.mSwitch = this.$parent.memberSwitch === 0 ? 0 : this.mSwitch;
    this.fetchMemberPayRule();
    getMemberCardInfoSwitch(null).then((res) => {
      const memberSwitchObj = (res.data || []).filter(
        (v) => v.memberModel === 1,
      )[0];
      this.mSwitch = memberSwitchObj ? memberSwitchObj.state : 0;
    });
  }

  // 获取会员储值数据
  fetchMemberPayRule() {
    getMemberPayRule(null).then(({ data }) => {
      if (data && data.length) {
        const newFormData = {
          state: data && data.length === 1 && data[0].state == 0 ? 0 : 1,
          ruleList: data,
        };
        this.formData = newFormData;
      }
    });
  }

  // 关闭储值功能
  closeSwitch() {
    this.mSwitch = 0;
    setMemberCardInfoStatus({
      memberCardInfoSwitch: 0,
      memberModel: 1,
    }).catch((res) => {
      this.$message({
        type: "error",
        message: res,
      });
      this.mSwitch = 1;
    });
  }

  // 新增有优惠下的规则
  onAddRule() {
    if (this.formData.ruleList && this.formData.ruleList.length === 10) {
      this.$message.error("储值规则最多只能10条");
      return false;
    }
    const newFormData = {
      state: 1,
      ruleList: [
        ...this.formData.ruleList,
        { state: 1, payAmount: null, discountAmount: null },
      ],
    };
    this.formData = newFormData;
  }

  // 删除储值规则
  onRemove(index) {
    this.formData.ruleList.splice(index, 1);
    const newFormData = {
      state: 1,
      ruleList: [...this.formData.ruleList],
    };
    this.formData = newFormData;
  }

  // 储值开关变化
  handelSwitch(v) {
    if (v === 0) {
      setMemberCardInfoStatus({
        memberCardInfoSwitch: 0,
        memberModel: 1,
      }).catch((res) => {
        this.$message({
          type: "error",
          message: res,
        });
        this.mSwitch = 1;
      });
    } else {
      setMemberCardInfoStatus({
        memberCardInfoSwitch: 1,
        memberModel: 1,
      }).catch((res) => {
        this.$message({
          type: "error",
          message: res,
        });
        this.mSwitch = 0;
      });
    }
  }

  // 保存储值管理
  onSave() {
    let isValue = true;
    if (this.formData.state == 1) {
      this.formData.ruleList.forEach((v) => {
        if (!v.payAmount || !v.discountAmount) {
          isValue = false;
        }
      });
      if (!isValue) {
        this.$message.error("请填写完成储值规则!");
        return false;
      }
    }
    saveMemberPayRule(
      this.formData.state
        ? this.formData.ruleList.map((v) => {
            v.state = 1;
            return v;
          })
        : [{ state: 0 }],
    )
      .then((res) => {
        res.code === 200 &&
          this.$message({
            type: "success",
            message: "保存成功",
          });
      })
      .catch((err) => {
        this.$message({
          type: "warning",
          message: err,
        });
      });
  }
}
</script>

<style lang="scss" scoped>
@include b(smember) {
  padding: 12px 24px;
  margin-bottom: 30px;
  overflow: hidden;
  background: rgb(244, 252, 255);
  > div {
    float: left;
  }
  @include e(tip) {
    width: 80%;
    > span {
      display: inline-block;
      margin-top: 12px;
      color: red;
    }
  }
  @include e(switch) {
    width: 15%;
    margin-left: 5%;
  }
}
</style>
